<template>
  <div class="rightside" :style="isShow">
    <div @click="backTop" class="topButton">
      <div><i class="iconfont icon-top"></i></div>
    </div>
    <div @click="backBottom" class="topButton">
      <div><i class="iconfont icon-bottom"></i></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  data: function () {
    return {
      isShow: "",
      isOut: "rightside-out",
      icon: "iconyueliang"
    };
  },
  methods: {
    // 回到顶部方法
    backTop() {
      window.scrollTo({
        behavior: "smooth",
        top: 0
      });
    },
    // 回到底部方法
    backBottom() {
      window.scrollTo({
        behavior: "smooth",
        top: 50000
      });
    },
    // 为了计算距离顶部的高度，当高度大于屏幕一半时显示置顶图标
    scrollToTop() {
      const that = this;
      let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > window.innerHeight/2) {
        that.isShow = "opacity: 1;transform: translateX(-45px);";
      } else {
        that.isShow = "";
      }
    }
  }
};
</script>

<style scoped>
.rightside div{
  margin-top: 10px;
}

.topButton {
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  background: rgba(45, 49, 59, 0.66);
  color: white;
}

.topButton:hover i{
  display: block;
  animation: turn-around 2s linear infinite;
  /*background-color: white;*/
  /*color: black;*/
}

@keyframes turn-around {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rightside {
  z-index: 4;
  position: fixed;
  right: -45px;
  bottom: 85px;
  transition: all 0.5s;
}
</style>
